<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { GameSearchParams } from '@/types/game';
  import {
    GameRegionLevels,
    GameTypes,
    GameGroupTypes,
    GameStates,
  } from '@/config/game';
  import { CourseItem } from '@/types/course';
  import { OperatorItem } from '@/types/operators';
  import { getOperatorList } from '@/api/operator';
  import { getCourseList } from '@/api/game';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import _ from 'lodash';

  const data = ref<GameSearchParams>({});

  const emit = defineEmits(['submit']);

  const handleConfirm = () => {
    const params = _.cloneDeep(data.value);
    if (params.signStartRange) {
      params.signStartDate = `${params.signStartRange[0]}TO${params.signStartRange[1]}`;
      delete params.signStartRange;
    }
    if (params.signEndRange) {
      params.signEndDate = `${params.signEndRange[0]}TO${params.signEndRange[1]}`;
      delete params.signEndRange;
    }
    if (params.startRange) {
      params.startDate = `${params.startRange[0]}TO${params.startRange[1]}`;
      delete params.startRange;
    }
    if (params.endRange) {
      params.endDate = `${params.endRange[0]}TO${params.endRange[1]}`;
      delete params.endRange;
    }
    if (
      params.state !== null &&
      params.state !== undefined &&
      `${params.state}` !== ''
    ) {
      params.states = [params.state];
      delete params.state;
    }
    if (params.testGame === 1) {
      params.testGame = 0;
    } else if (params.testGame === 2) {
      params.testGame = 1;
    } else {
      params.testGame = undefined;
    }
    emit('submit', params);
  };

  const handleReset = () => {
    data.value = {};
    emit('submit', {});
  };

  const handleProvinceChanged = () => {
    data.value.city = undefined;
  };

  const courseList = ref<CourseItem[]>([]);
  const handleSearchCourse = async (value: string) => {
    try {
      const res = await getCourseList({
        pageIndex: 1,
        pageSize: 50,
        content: value,
      });
      courseList.value = res.data.data.list || [];
    } finally {
      // do nothing
    }
  };

  const operatorList = ref<OperatorItem[]>([]);
  const handleSearchOperator = async (value: string) => {
    try {
      const res = await getOperatorList({
        pageIndex: 1,
        pageSize: 50,
        content: value,
      });
      operatorList.value = res.data.data.list || [];
    } finally {
      // do nothing
    }
  };

  onMounted(() => {
    handleSearchCourse('');
    handleSearchOperator('');
  });
</script>

<template>
  <a-form :model="data" layout="vertical">
    <a-row :gutter="12">
      <a-col :flex="1">
        <a-row :gutter="12">
          <a-col :span="6">
            <a-form-item hide-label field="name">
              <a-input v-model="data.name" allow-clear>
                <template #prefix>名称</template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item hide-label field="regionLevel">
              <a-select
                v-model="data.regionLevel"
                allow-clear
                :options="GameRegionLevels"
              >
                <template #prefix>赛事级别</template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item hide-label field="type">
              <a-select v-model="data.type" allow-clear :options="GameTypes">
                <template #prefix>赛事类型</template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item hide-label field="groupType">
              <a-select
                v-model="data.groupType"
                allow-clear
                :options="GameGroupTypes"
              >
                <template #prefix>比赛方式</template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item hide-label field="province">
              <a-select
                v-model="data.province"
                allow-clear
                @change="handleProvinceChanged"
              >
                <template #prefix>省份</template>
                <a-option v-for="p in ProvinceJSON" :key="p.id" :value="p.id">
                  {{ p.name }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="city">
              <a-select v-model="data.city" allow-clear>
                <template #prefix>城市</template>
                <a-option
                  v-for="c in CityJSON[data.province as keyof typeof CityJSON]"
                  :key="c.id"
                  :value="c.id"
                >
                  {{ c.name }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="courseId">
              <a-select
                v-model="data.courseId"
                allow-clear
                allow-search
                :options="
                  courseList.map((i) => ({ label: i.name, value: i.id }))
                "
                @search="handleSearchCourse"
              >
                <template #prefix>球场</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="operatorId">
              <a-select
                v-model="data.operatorId"
                allow-clear
                allow-search
                :options="
                  operatorList.map((i) => ({ label: i.name, value: i.id }))
                "
                @search="handleSearchOperator"
              >
                <template #prefix>执行机构</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="9">
            <a-form-item hide-label field="signStartRange">
              <a-range-picker v-model="data.signStartRange" style="width: 100%">
                <template #prefix>报名开始时间</template>
              </a-range-picker>
            </a-form-item>
          </a-col>

          <a-col :span="9">
            <a-form-item hide-label field="signEndRange">
              <a-range-picker v-model="data.signEndRange" style="width: 100%">
                <template #prefix>报名截止时间</template>
              </a-range-picker>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="state">
              <a-select v-model="data.state" allow-clear :options="GameStates">
                <template #prefix>进程</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="9">
            <a-form-item hide-label field="startRange">
              <a-range-picker v-model="data.startRange" style="width: 100%">
                <template #prefix>比赛开始时间</template>
              </a-range-picker>
            </a-form-item>
          </a-col>

          <a-col :span="9">
            <a-form-item hide-label field="endRange">
              <a-range-picker v-model="data.endRange" style="width: 100%">
                <template #prefix>比赛结束时间</template>
              </a-range-picker>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="testGame">
              <a-select
                v-model="data.testGame"
                :options="[
                  { label: '排除测试赛', value: 1 },
                  { label: '仅查看测试赛', value: 2 },
                  { label: '全部', value: 3 },
                ]"
                allow-clear
              >
                <template #prefix>测试赛</template>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col flex="none" style="width: 80px">
        <a-row :gutter="[12, 12]">
          <a-col>
            <a-button type="primary" @click="handleConfirm"> 搜索 </a-button>
          </a-col>
          <a-col><a-button @click="handleReset">重置</a-button></a-col>
        </a-row>
      </a-col>
    </a-row>
  </a-form>
</template>
